<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="http://127.0.0.1:801/ui2/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-hide" id="test"></table>
 

 
 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
  	<div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>     
 

              
          
<script src="http://127.0.0.1:801/ui2/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>



layui.use(['table','element'], function(){
  var table = layui.table
  ,form = layui.form
  ,element = layui.element;;
  
  table.render({
    elem: '#test'
    ,url:'/1.json'
    ,cellMinWidth: 80
    ,cols: [[
      {type:'numbers'}
      ,{type: 'checkbox'}
      ,{field:'id', title:'ID', width:100, unresize: true, sort: true}
      ,{field:'username', title:'用户名', templet: '#usernameTpl'}
      ,{field:'city', title:'城市'}
      ,{field:'wealth', title: '财富', minWidth:120, sort: true}
      ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
      ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
    ]]
    ,page: true
  });
  
  //监听性别操作
  form.on('switch(sexDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
  
  //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
});
</script>

</body>
</html>